// 包裹Row
export function wrapRowToken(str) {
  return `
    <el-row v-bind="layoutConfig.row">
${str}    </el-row>`;
}

export function appendRowStartToken(str) {
  return `${str}
  <el-row v-bind="layoutConfig.row">
`;
}

export function appendRowEndToken(str) {
  return `${str}
  </el-row>`;
}

// 包裹Col
export function wrapColToken(str) {
  return `      <el-col v-bind="layoutConfig.col">
${str}
      </el-col>
`;
}

// 包裹form-item
export function wrapFormItemToken(str, formField) {
  const { formKey } = formField;
  const formKeyArr = formKey.split(".");
  const isSubForm = formKeyArr.length > 2;
  let propStr = "";
  if (isSubForm) {
    propStr = `label-width="0"`;
    propStr += `:prop="\`${formKey}\`"`;
    propStr += ` :rules="formRule.${formKeyArr[formKeyArr.length - 1]}"`;
  } else {
    propStr = `label="${formField.label}" prop="${formKey}"`;
  }
  return `        <el-form-item ${propStr}>
        ${str}
        </el-form-item>`;
}

// 包裹readonly
export function wrapReadonlyToken(str, formField) {
  const displayKey = formField.displayKey ?? formField.formKey;
  return `          <ReadonlyField
            :isPreview="isPreview"
            :displayText="formData.${displayKey}"
          >
            ${str}
          </ReadonlyField>`;
}

// 包裹search-form
export function wrapSearchFormToken(str) {
  return `<el-form inline :model="queryFormData" class="search-form">
            ${str}

            <el-form-item>
              <el-button type="primary" @click="handleSearch">查询</el-button>
              <el-button @click="handleReset">重置</el-button>
            </el-form-item>
          </el-form>`;
}

// 包裹subFrom column
export function wrapSubFormTableColumnToken(
  str,
  formField,
  isSubFormTableData
) {
  if (isSubFormTableData) {
    if (formField.label === "序号") {
      return `<el-table-column label="${formField.label}" width="60px">
       <template #default="{$index}">
            <span> {{ $index + 1 }} </span>
       </template>
    </el-table-column>
`;
    } else {
      return `<el-table-column label="${formField.label}" prop="${formField.formKey}"/>
`;
    }
  } else {
    let scopeStr = "";
    let scopeData = "$index";
    if (formField.label === "序号") {
      scopeStr = `<el-form-item label-width="0">
      <span> {{ $index + 1 }} </span>
    </el-form-item>`;
    } else if (formField.label === "操作") {
      scopeStr = `<el-form-item label-width="0">
      <el-button type="text" size="mini" @click="handleDelete($index)"> 删除 </el-button>
    </el-form-item>`;
    } else {
      scopeData = "row,$index";
      scopeStr = str;
    }

    return `<el-table-column
          label="${formField.label}"
          ${
            formField.label === "序号"
              ? 'width="60px"'
              : formField.label === "操作"
              ? "width='80px"
              : ""
          }
        >
          <template #default="{${scopeData}}">
            ${scopeStr}
          </template>
        </el-table-column>
`;
  }
}

// 包裹纯文本
export function wrapFieldTextToken(formField) {
  const { type } = formField;
  if (type === "preview-media") {
    return `<PreviewMedia :fileList="formData.${formField.formKey}" />`;
  } else if (type === "upload-file") {
    return `<UploadFile disabled v-model="formData.${formField.formKey}" />`;
  }
  return `<ReadonlyField isPreview :displayText="formData.${formField.formKey}"/>`;
}


// ========== 根据项目自定义 ============ 

// 包裹groupForm
export function wrapGroupFormWrapToken(str, formField) {
  return `
<SectionCard title="${formField.label}">
 ${str}
</SectionCard>`;
}


// 包裹subForm table
export function wrapSubFormTableToken(str, formField, isSubFormTableData) {
  let _str = !isSubFormTableData
    ? `<el-button type="primary" size="mini" @click="handleAdd">添加</el-button>`
    : "";
  return `
  ${_str}
  <el-table
          :data="formData.${formField.formKey}"
          style="width: 100%"
          border
          header-cell-style="background: #f4f3f9; color: #606266"
        >
          ${str}
        </el-table>`;
}